<template>
<div class="index">
  <div class="path w">
    <div class="path-main">
			<span v-if="isLogin">您好{{userName}}</span>
      <span v-else class="hover" @click="goToLogin">登录</span><span>|</span><span class="hover" @click="goToMe">修改个人资料</span>
			<span v-if="hasOrg">|</span><span class="hover"  @click="goToMango" v-if="hasOrg">机构管理</span>
			<span>|</span><span class="hover" @click="goToOutLogin">退出登录</span>
		</div>
  </div>
  <div class="pic-ad w" v-if="barImg">
    <img :src="barImg"/>
  </div>
	<template v-if="!isManage">
		<div class="w path-box" style=" padding:15px; margin-bottom:15px; width:1070px">
			<el-date-picker  format="yyyy-MM-dd" v-model="queryData.searchTime" style=" margin:0 15px;" type="date" placeholder="选择日期"></el-date-picker>			
			<el-input v-model.trim="queryData.exhibitionName" clearable style="width:300px; margin-right:15px;" placeholder="请输入关键字" auto-complete="off"></el-input>
			<el-button type="primary" @click="getList">搜索</el-button>
		</div>
		<div class="w path-box" style=" padding:15px; width:1070px">
			<el-table border style="width: 100%" :data="list">
				<el-table-column align="center" label="Logo" width="150">
					<template slot-scope="scope">
						<img class="logo" :src="'https://reg.reed-sinopharm.com/'+ scope.row.exhibitionLogo"/>
					</template>
				</el-table-column>
				<el-table-column label="展会名称" align="center"  width="270" prop="exhibitionName"  show-overflow-tooltip></el-table-column>
				<el-table-column label="时间" align="center"  width="160">
					<template slot-scope="scope">
						开始:{{scope.row.exhibitionBeginDate}}<br/>结束:{{scope.row.exhibitionEndDate}}<br/>
						<!--
						{{scope.row.state}}
						-->
					</template>
				</el-table-column>
				<el-table-column label="地址" align="center"  width="300" show-overflow-tooltip prop="exhibitionAddress"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button v-if="scope.row.roleType == 2" size="mini" type="primary" @click="goToMange(scope.row)">员工管理</el-button>
						<span v-else style="color:#CCC">员工角色</span>
					</template>
				</el-table-column>			
			</el-table>
			<div v-if="queryTotle > 15 " style="padding:30px 0 60px 0; text-align:right">
				<el-pagination background layout="prev, pager, next" @current-change="changePage"  :pageSize="parseInt(queryData.pageSize)" :total="queryTotle"></el-pagination>		
			</div>
		</div>
	</template>
	<template v-if="isManage">
		<div class="w path-box" style=" padding:15px; margin-bottom:15px; width:1070px">
			<el-button type="primary" style=" width:120px;" @click="addFormData">新增</el-button>
			<div class="back" @click="getList">
				<i class="el-icon-back" ></i>
				<span>返回</span>
			</div> 
		</div>		
		<div class="w path-box" style=" padding:15px; width:1070px">
			<el-table border style="width: 100%" :data="member">
				<el-table-column label="姓名" align="center"  width="270" prop="realName"  show-overflow-tooltip></el-table-column>
				<el-table-column label="部门" align="center"  width="270" prop="deptName"  show-overflow-tooltip></el-table-column>
				<el-table-column label="手机号" align="center"  width="270" prop="mobile"  show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="setEidtBox(scope.row.uuid)">编辑</el-button>
						<el-button size="mini" type="danger" @click="delMember(scope.row.uuid)" style="border-radius:1px !important;">删除</el-button>
					</template>
				</el-table-column>
			</el-table>	
			<div v-if="memTotle > 15 " style="padding:30px 0 60px 0; text-align:right">
				<el-pagination background layout="prev, pager, next" @current-change="changePageMem"  :pageSize="parseInt(memData.pageSize)" :total="memTotle"></el-pagination>		
			</div>			
		</div>	
	</template>
	
	<el-dialog :title="formTitle" :visible.sync="formVisible" :before-close="hideForm" :close-on-click-modal="false" width="50%" top="5vh">
		<el-form :model="formData" :rules="formRules" ref="dataForm" style=" padding-right:30px;">
		<el-form-item label="姓名" label-width="90px"  prop="customerName">
			 <el-input v-model="formData.customerName" placeholder="请输入姓名" auto-complete="off"></el-input>
		</el-form-item>		
		<el-form-item label="手机号" label-width="90px"  prop="mobile">
			 <el-input v-model="formData.mobile" maxLength="11" placeholder="请输入手机号" auto-complete="off"></el-input>
		</el-form-item>
		<el-form-item label="部门" label-width="90px"  prop="deptName">
			 <el-input v-model="formData.deptName" placeholder="请输入部门" auto-complete="off"></el-input>
		</el-form-item>						
		</el-form>
		<div class="dialog-footer"  style=" text-align:right; padding:12px 30px 12px 0;">
			<el-button @click.native="hideForm" style=" border-radius:0;">取消</el-button>
			<el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
		</div> 		
	</el-dialog>
</div>
</template>
<script>
import config from "@/config";


export default {

  data() {
		return {
			queryData:{
				nowPage:'1',
				pageSize:'15',
				searchTime:this.setTimeFormat(new Date().getTime()),
				exhibitionName:'',
			},
			queryTotle:0,
			isLogin:config.isLogin,
			barImg:'',
			userName:'',
			hasOrg:false,
			list:[],
			isManage:false,
			member:[],
			memData:{
				nowPage:'1',
				pageSize:'15'	
			},
			memTotle:0,
			
			formTitle:'',	
			formVisible:false,
			formData:{
				customerName:'',
				mobile:'',
				deptName:''
			},
			formRules:{
				customerName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
				mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],	
			},			
			formLoading:false,
		}
	},
	mounted() {
		this.userName = config.userInfo && config.userInfo.customer ? config.userInfo.customer.customerName : '';
		this.id = this.$route.query.id ? this.$route.query.id : '';	
		this.hasOrg = config.baseInfo.customerInfoDTO.hasOrg;
		this.getDetail();
		this.getList();
	},
	methods: {
		async setEidtBox(_uuid){
			this.formTitle = '编辑员工';
			var map = {
				uuid:_uuid,
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid		
			};	
			var param = config.setFormData('getOrgUserByUuid',map);
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){	
				this.formData = {
					uuid:_uuid,
					customerName:res.data.data.realName,
					mobile:res.data.data.mobile,
					deptName:res.data.data.deptName
				};
				this.formVisible = true;
			}
		},
		addFormData(){
			this.formTitle = '新增员工';
			this.formVisible = true;	
		},
		formSubmit(){
			this.$refs["dataForm"].validate(valid => {
				if(!valid) return;
				if(this.formTitle == '新增员工'){
					this.editMember('add');	
				}else if(this.formTitle == '编辑员工'){
					this.editMember('edit');	
				}
			})
		},
		async editMember(type){
			var map = {
				customerName:this.formData.customerName,
				mobile:this.formData.mobile,
				deptName:this.formData.deptName,
				exhibitionUuid:this.curExhibitionUuid,
				orgUuid:this.curOrgUid,
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid		
			};
			this.formLoading = true;
			if(type == 'add'){			
				var param = config.setFormData('addOrgUsers',map);
				var res = await this.$http.post(config.appCall,param);
			}else if(type == 'edit'){
				map.uuid = this.formData.uuid;
				var param = config.setFormData('updateOrgUser',map);
				var res = await this.$http.post(config.appCall,param);	
			}
			this.formLoading = false;
			this.goToMange();
			this.hideForm();
		},
		
		hideForm(){
      this.formVisible = !this.formVisible;
			if (this.$refs["dataForm"]) {
				// 清空验证信息表单
				this.$refs["dataForm"].clearValidate();
				// 刷新表单
				this.$refs["dataForm"].resetFields();
			}
      return true;				
		},
		delMember(_uuid){
			this.$confirm("确认删除该记录吗?", "提示", {type: "warning"}).then(async () => {
				var map = {
					uuids:_uuid,
					token : config.userInfo.token,
					sessionId : config.userInfo.sessionId,
					customerUuid : config.userInfo.customer.uuid		
				};					
				var param = config.setFormData('deleteOrgUser',map);
				var res = await this.$http.post(config.appCall,param);
				if(res.data && res.data.return_code == '0'){
					this.$message.success("删除成功");
					this.goToMange();
				}else{
					this.$message.error(res.data.message);
				}
				
			}).catch(() => {
					//this.$message.info("取消删除");
			});			
		},
		async goToMange(item){
			this.curExhibitionUuid = item ? item.uuid : this.curExhibitionUuid ;
			this.curOrgUid = item ? item.orgUuid : this.curOrgUid;
			this.isManage = true;
			var map = {
				nowPage:this.memData.nowPage,
				pageSize:this.memData.pageSize,
				exhibitionUuid:this.curExhibitionUuid,
				orgUuid:this.curOrgUid,
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid		
			};			
			var param = config.setFormData('getExhibitionOrgUserList',map);
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){
				this.member = res.data.data;
				this.memTotle = res.data.totalNum;
			}
		},
		changePageMem(val){
			this.memData.nowPage = val+'';
			this.goToMange();
		},
		async getList(){
			this.isManage = false;
			var map = {
				nowPage:this.queryData.nowPage,
				pageSize:this.queryData.pageSize,
				searchTime:this.setTimeFormat( new Date(this.queryData.searchTime).getTime()),
				exhibitionName:this.queryData.exhibitionName,
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid		
			};
			var param = config.setFormData('getExhibitionOrgByCustomerUuid',map);
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){
				this.list = 	res.data.data;
				this.queryTotle = res.data.totalNum;
			}
		},
		changePage(val){
			this.queryData.nowPage = val+'';
			this.getList();
		},
		async getDetail(){
			var map = {
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid,
				exhibitionUuid :this.id,			
			};
			var param = config.setFormData('getExhibitionDetail',map)
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){
				this.barImg = 'https://reg.reed-sinopharm.com/'+res.data.infoDto.planeFigure;
			}		
		},
		goToOutLogin(){
			localStorage.userInfo = '';
			localStorage.baseInfo = '';
			config.userInfo = '';
			config.baseInfo = '';
			this.$router.push({path: '/login?id='+this.id})	
		},
		goToMango(){
			this.$router.push({path: '/list?id='+this.id})		
		},
		goToLogin(){
			this.$router.push({path: '/login?id='+this.id})	
		},
		goToMe(){
			this.pathAction = 1;
			this.$router.replace({path: 'index', query: {'id': this.id,'tab':1}});			
		},
		setTimeFormat(val){
			var paddingStr = function (_str) {
				return _str.length == 1 ? "0" + _str : _str
			}
			var _curDate = new Date(val);	
			var _YY = _curDate.getFullYear();
			var _MM = paddingStr(_curDate.getMonth() + 1 + '');
			var _DD = paddingStr(_curDate.getDate() + '');
			return `${_YY}-${_MM}-${_DD}`					
		}
	}
}
</script>
<style scoped>
.index{}

.path{ display:flex; font-size:14px; color:#333;}
.path .left{ width:200px; text-align:left;height:40px; line-height:40px; }
.path-main{ flex:1; display:flex; justify-content:flex-end;}
.path-main span{height:40px; line-height:40px; margin-right:8px; cursor:pointer;}
.path-main .hover:hover{ text-decoration:underline;}
.path-ad{ background-image: linear-gradient(to right, #DF9E7E, #ECB08C)}
.header{ height:95px; overflow:hidden;}
.header .logo{ float:left;}

.index-head-box{width:546px;position:relative; height:140px; float:right;}
.index-ser-tab{  font-size:14px; padding-top:10px;}
.index-ser-tab span{ float:left; margin-right:15px; height:28px; line-height:25px; cursor:pointer;}
.index-ser-tab span.cur{ color:#E1251B;}

.index-search{ width:546px;  display:flex; height:32px; border:2px solid #E1251B;  top:25px; left:70px;}
.index-ser-wrap{  width:488px;  background:#fff;}
.index-ser-wrap input{ float:left; border:0; outline:none;  font-size:12px; width:380px; height:24px; margin:4px 16px 0;}
.index-ser-wrap img{ float:right; margin:9px 17px 0 0; cursor:pointer;}
.index-ser-btn{ flex:1; background:#E1251B url(../assets/icon-05.png) no-repeat center center; cursor:pointer;}
.index-ser-btn:hover{ background-color:#C81623}
.index-hots{ font-size:14px; padding-top:5px;}
.index-hots a{ margin-right:10px; color:#666;}

.nav{ height:80px; line-height:80px; text-align:right;}
.nav a{ margin-left:105px; font-weight:bold;color:#666; text-decoration:none;}
.nav a:hover{ text-decoration:underline;}
.creat-path{ padding-top:50px;}
.pic-ad{ margin-bottom:15px;}
.pic-ad img{ width:1100px; border-radius:5px;}

.path-box{box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); background:#fff; padding-bottom:80px; margin-bottom:60px;}

.footer{display:flex; justify-content:space-between; padding-bottom:30px;  margin-top:80px;}
.link{ flex:1; display:flex;}
.link-li{ width:25%;}
.link-li p{ font-weight:bold; margin:0; padding-bottom:13px;}
.link-li a{ display:block; line-height:1.8; font-size:14px; color:#333; text-decoration:none;}
.link-li a:hover{ text-decoration:underline;}
.aobut{ width:300px; margin-left:80px;  background:url(../assets/about.jpg) no-repeat  0 50px;}
.aobut p{ margin:0;font-weight:bold; padding-left:7px; }
.aobut .t{ font-size:14px; line-height:1.6;  margin:0 0 6px 120px;}
.aobut .td{ margin:40px 0 12px 90px;}

.wt{ width:100%; border-top:1px solid #DCDFE6}
.f-link{ text-align:center; padding:30px 0 12px; text-align:center; font-size:14px;}
.f-link a{ margin:0 5px;}
.f-btx{ text-align:center; font-size:14px; padding-bottom:30px;}
.logo{ width:120px;}
.back{ float:right; cursor:pointer; margin:5px 14px 0 0;}
</style>